<template>
	<view style="height: 100vh;align-items: center;">
		<gameBasics />

		<video v-if="bingoVideo" :src="game_config.video" :controls="false" autoplay page-gesture :custom-cache='false'
			@ended="setConfiguration"></video>

		<video v-if="gameVideo" :src="gameVideo" :controls="false" autoplay page-gesture :custom-cache='false'
			@ended="goGameShow=true"></video>
		<!-- begin -->
		<!-- v-if="goGameShow" -->
		<view class="unlock" v-if="goGameShow">	
			<view class="" style="opacity: 0;" v-if="userPeople.cap_zt!=1">
				<u-slider v-model="num"  blockSize="28" @change="change"></u-slider>
			</view>
			<view class=""
				style="width: calc(100% - calc(92vmin / 7.5));position: absolute;bottom: calc(18vmin / 7.5);left: calc(45vmin / 7.5);z-index: -1;">
				<view class="slider" :style="{width:num+'%'}">
        <view class="" v-if="userPeople.cap_zt!=1" style="width: calc(60vmin / 7.5);height: calc(60vmin / 7.5);background-color: #FFCB71;position: absolute;right: calc(-60vmin / 7.5);top: 0;transform: translateX(calc(-30vmin / 7.5));">
        	 
        </view>
				</view>
				<view class="" style="color: #fff;position: absolute;text-align: center;left: 0;right: 0;top: calc(6vmin / 7.5);font-weight: 700;animation: flicker 2s infinite;">
					{{num>=99?'即将开始游戏':userPeople.cap_zt!=1?'滑动开始游戏>>':'等待队长开始游戏'}}
				</view>

			</view>
		</view>

		<view class="" style="    display: flex;
    width: 75vw;
    height: 100%;
    margin: auto;">
			<view class="game_list">
				<view
					:class="{'game_item_':bingo_list.length==9,'game_item':bingo_list.length==16,'active':item.active}"
					@click="setActive(index)" v-for="(item ,index) in bingo_list" style="position: relative;">
					<view :class="{'triumph':bingo_list.length==16,'triumph_':bingo_list.length==9}"
						v-if="item.team_list">
						<view :class="'wrap wrap'+item.teamIndex"><span
								:class="'silk-ribbon silk-ribbon'+item.teamIndex">分数：{{item.team_list.number}}</span>
						</view>
						<image class="" :src="item.team_list.pic" mode="aspectFill"></image>
						<view class="">
							{{item.title}}
						</view>
					</view>
					<view class="numIndex">
						{{index+1}}
					</view>
				</view>


				<!-- 	<view class="game_item_" v-for="item in 9">
				
			</view> -->


			</view>
			<view class="right">
				<view class="team_item" v-for="(item ,index) in teamList">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="name">
						{{item.title}}
					</view>
					<view class="score">
						{{item.bingo_num||0}}分
					</view>
				</view>
			</view>

		</view>
		<view class="time">
			<view class="" v-if="overGame||code=='204'" style="display: flex;color: #FFCB71;text-align: center;">
				恭喜完成挑战 <u-count-down :time="25000" format="HH:mm:ss" autoStart millisecond @finish="finish">
				</u-count-down> 后游戏结束！
			</view>
			<flipcountdown v-else :propsType="2" :endTime="outTime" value="00:00:00" :autoplay="autoplay"
				@getTimeOut="getTimeOut" ref="time" zoom=".32" />

			<!-- <u-count-down :time="outTime*1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down> 后游戏结束！ -->
		</view>
		<u-popup :show="show" @close="show=false" mode="center" :safeAreaInsetBottom="false" closeable
			round="calc(12vmin / 7.5)">
			<view style="padding: 0 calc(50vmin / 7.5);width: calc(624vmin / 7.5);">
				<view class=""
					style="font-size: calc(32vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin-top: calc(90vmin / 7.5);">
					{{item.title}}
				</view>
				<view class=""
					style="font-size: calc(36vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin: calc(30vmin / 7.5) auto;">
					是否确定开始挑战？
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: calc(30vmin / 7.5);">
					<view class="anew_btn" @click="setGameVideo">
						YES
					</view>
					<view class="anew_btn" @click="show=false">
						NO
					</view>
				</view>
			</view>
		</u-popup>



		<u-popup :show="remindShow" mode="center" :safeAreaInsetBottom="false" round="12rpx">
			<view style="padding: 0 50upx;width: calc(624vmin / 7.5);position: relative;">
				<view class=""
					style="font-size: calc(36vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin: calc(110vmin / 7.5) auto;">
					恭喜 {{rank.team_title}} 获得最终胜利!
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: calc(30vmin / 7.5);">
					<view class="anew_btn" @click="remindShow=false">
						我知道了
					</view>

					<!-- 					<view class="anew_btn" @click="cancel">
								NO
							</view> -->
				</view>
			</view>
		</u-popup>

		<gameLoading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Xindex: -1,
				bingo_list: [],
				gameData: {},
				game_config: {},
				teamList: [],
				userPeople: {},
				item: {},
				show: false,
				acceptStatus: true,
				outTime: 0,
				autoplay: false,
				overGame: false,
				bingoVideo: false,
				remindShow: false,
				gameVideo: '',
				code: '',
				goGameShow: false, //是否准备好
				rank: {},
				num: 0
			}
		},
		watch: {
			outTime() {
				setTimeout(() => {
					this.autoplay = true
				}, 800)
			}
		},
		onLoad() {
			this.$ws.init()
			uni.$on('onMessage', (res) => {
				if (!this.acceptStatus) return;
				// this.$nextTick(()=>{
				this.$store.commit('switchGame', {
					code: false
				})
				// })
				// if (res.data.code != 202) return;
				this.code = res.data.code
				this.gameData = res.data.game
				this.bingo_list = res.data.bingo_list
				if (res.data.game_config) {
					this.game_config = res.data.game_config
					this.outTime = +this.game_config.time_s + this.game_config.time
					if ((this.gameData.current_time - this.game_config.time_s) < 10||this.bingoVideo == true) {
						this.bingoVideo = true
					} else {
						this.bingoVideo = false
					}
				}
				if (res.data.rank) {
					this.rank = res.data.rank[0]

					this.gameVideo = ''
				}


				this.teamList = res.data.team

				this.teamList.forEach((item, index) => {
					//每队获胜的游戏下标
					item.victoryIndex = []
					this.bingo_list.forEach((items, indexs) => {
						if (items.team_list) {
							if (items.team_list.id == item.id) {
								item.victoryIndex.push(indexs)
								items.teamIndex = index
							}
						}
					})
				})

				//bingo路线
				let bingoPath = []
				this.teamList.forEach(item => {
					if (item.victoryIndex.length) {
						item.bingoNum = this.decideResult(this.bingo_list.length, item
							.victoryIndex)
						item.bingoNum.forEach(item => {
							bingoPath.push(...item)

						})
					}
				})


				bingoPath.forEach(item => {
					this.bingo_list[item].active = true
				})

				this.userPeople = res.data.userPeople
				if (this.userPeople.activ_list) {
					this.gameVideo = this.userPeople.activ_list.config.video_a
				}
				if (res.data.code == '204') {
					this.remindShow = true
					this.overGame = true
					// 	this.teamList.forEach((item,index)=>{
					// 		item.bingo_num=res.data.rank[index].bingo_num||0
					// 	})      
				}
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
		},
		methods: {
			change(value) {
				if (value < 99) {
					let time = setInterval(() => {
						this.num = value
						value--
						if (this.num == 0) {
							clearInterval(time)
						}
					}, 5)

				} else {
					this.num = value
					setTimeout(()=>{
						this.begin()
					},1500)
				}
				console.log('?????')
			},
			setConfiguration() {
				this.bingoVideo = false
			},
			finish() {
				if (this.userPeople.cap_zt == 1) return;
				this.$myRuquestWs('home/game/game_end_bingo_s', {
					game_id: this.gameData.id,
				}, 'POST')

			},
			setActive(index) {
				if (this.userPeople.cap_zt == 1) return;
				this.Xindex = index
				this.item = this.bingo_list[index]
				this.show = true



			},
			setGameVideo() {
				this.show = false

				let data = {
					game_id: this.gameData.id,
					key: this.Xindex + 1,
					team_id: this.userPeople.teamId
				}
				this.$myRuquestWs('home/game/bingo_check', data).then(res => {
					// this.gameVideo = this.item.game_config.video_a
				})
				// this.begin()
			},
			begin() {
				if (!this.userPeople.teamId) return uni.showToast({
					title: '网络异常，请重试！',
					icon: 'none'
				});
				let data = {
					game_id: this.gameData.id,
					key: this.userPeople.activ_list.key,
					team_id: this.userPeople.teamId
				}
				this.$myRuquestWs('home/game/bingo_check_go', data).then(res => {

				})
			},
			getTimeOut() {

				//bingo路线
				let bingoPath = []
				this.teamList.forEach(item => {
					if (item.victoryIndex.length) {
						bingoPath = this.decideResult(this.bingo_list.length, item
							.victoryIndex)
					}
				})
				bingoPath.forEach(item => {
					this.bingo_list[item].active = true
				})

				this.overGame = true

				// return;
				setTimeout(() => {
					if (this.gameData.user_id != this.userPeople.user_id) return;
					this.$myRuquestWs('home/game/game_end_bingo', {
						game_id: this.gameData.id
					}).then(res => {

					})
				}, 500)



			},
			decideResult(chessboardNum = 16, arr) {

				let num = Math.sqrt(chessboardNum)
				let correctArr = []
				let bingoArr = []


				//横向是否满足
				for (let i = 0; i < chessboardNum; i += num) {
					//i为 1 5 9 13
					let index = i
					correctArr = []
					for (let l = 0; l < num; l++) {
						if (!arr.some(item => item == index)) {
							l = num
						} else {
							correctArr.push(index)
							if (correctArr.length == num) {
								l = num

								bingoArr.push(correctArr)
							}
						}
						index += 1
					}
				}

				//纵向是否满足
				for (let i = 0; i < num; i++) {
					let index = i
					correctArr = []
					for (let l = 0; l < num; l++) {
						if (!arr.some(item => item == index)) {
							l = num
							correctArr = []

						} else {
							correctArr.push(index)
							if (correctArr.length == num) {
								l = num
								bingoArr.push(correctArr)
							}
						}
						index += num
					}
				}

				//交叉是否满足
				function cross(index = 0, code) {
					correctArr = []
					for (let i = 0; i < num; i++) {
						if (!arr.some(item => item == index)) {
							i = num
							correctArr = []
						} else {
							correctArr.push(index)
						}
						index += code == 2 ? num - 1 : num + 1
					}

					return correctArr
				}
				if (cross(0, 1).length == num) {
					bingoArr.push(correctArr)
				}
				if (cross(num - 1, 2).length == num) {
					bingoArr.push(correctArr)
				}

        //返回满足数组下标
				return bingoArr;
			}



		}
	}
</script>

<style lang="scss">
	.unlock {
		position: fixed;
		width: 50vw;
		bottom: 10vh;
		left: 50%;
		z-index: 99999999;
		transform: translateX(-50%);
		padding: calc(10vmin / 7.5);
		background-color: rgba(165, 165, 165, 0.6);
		border-radius: calc(4vmin / 7.5);
	}
	@keyframes flicker{
		0%{
			opacity: 1;
		}
		50%{
			opacity: .1;
		}
		100%{
			opacity: 1;
		}
	} 

	.slider {
		background-color: rgba(255,203,113,.5);
		height: calc(60vmin / 7.5);
		position: relative;
	}

	.time__custom__item {
		color: #FFCB71 !important;

	}

	.active {

		box-shadow: 0 0 8px #916833;
		animation: mymove .4s linear infinite;
	}

	@keyframes mymove {
		0% {
			transform: rotateZ(0deg);
		}

		25% {
			transform: rotateZ(4deg);
		}

		50% {
			transform: rotateZ(0deg);
		}

		75% {
			transform: rotateZ(-4deg);
		}

		100% {
			transform: rotateZ(0deg);
		}

	}

	.triumph {
		margin: auto;
		text-align: center;
		color: #fff;
		font-size: calc(24vmin / 7.5);
		position: relative;

		.wrap {
			top: calc(-20vmin / 7.5);
			left: calc(24vmin / 7.5);
		}

		.wrap:before {
			width: calc(40vmin / 7.5);
		}

		image {
			width: calc(80vmin / 7.5);
			height: calc(80vmin / 7.5);
			margin: 0 auto;
			margin-top: calc(10vmin / 7.5);
		}

		view {
			overflow: hidden;

			white-space: nowrap;

			text-overflow: ellipsis;
			width: calc(120vmin / 7.5);
		}
	}

	.triumph_ {
		margin: auto;
		text-align: center;
		color: #fff;
		font-size: calc(24vmin / 7.5);
		position: relative;

		.wrap {
			top: calc(-7vmin / 7.5);
			left: calc(13vmin / 7.5);
		}

		.wrap:before {
			width: calc(25vmin / 7.5);
		}

		image {
			width: calc(120vmin / 7.5);
			height: calc(120vmin / 7.5);
			margin: 0 auto;
			margin-top: calc(10vmin / 7.5);
		}

		view {
			overflow: hidden;

			white-space: nowrap;

			text-overflow: ellipsis;
			width: calc(200vmin / 7.5);
		}
	}

	.wrap {
		width: calc(156vmin / 7.5);
		height: calc(130vmin / 7.5);
		position: absolute;

		overflow: hidden;
	}

	.wrap:before {
		content: "";
		display: block;
		border-radius: calc(8vmin / 7.5) calc(8vmin / 7.5) calc(8vmin / 7.5) calc(8vmin / 7.5);

		height: calc(8vmin / 7.5);
		position: absolute;
		right: calc(100vmin / 7.5);
		background: #AC7D3D;
	}

	.wrap:after {
		content: "";
		display: block;
		border-radius: calc(8vmin / 7.5) calc(8vmin / 7.5) calc(8vmin / 7.5) calc(8vmin / 7.5);
		width: calc(8vmin / 7.5);
		height: calc(40vmin / 7.5);
		position: absolute;
		right: 0px;
		top: calc(85vmin / 7.5);
		background: #AC7D3D;
	}

	.wrap1:before,
	.wrap1:after {
		background: #ac413e
	}

	.wrap2:before,
	.wrap2:after {
		background: #3c67ac
	}

	.wrap3:before,
	.wrap3:after {
		background: #67ac38
	}

	.time {
		// background-color: rgba(0, 0, 0, .23);


		padding: calc(6vmin / 7.5) calc(15vmin / 7.5);
		border-radius: calc(35vmin / 7.5);
		text-align: center;
		font-size: calc(32vmin / 7.5);
		position: fixed;
		right: calc(20vmin / 7.5);
		bottom: calc(20vmin / 7.5);
		z-index: 999;

		.u-count-down__text {
			color: #fff !important;
			font-size: calc(40vmin / 7.5);
		}
	}

	.anew_btn {
		width: calc(234vmin / 7.5);
		height: calc(68vmin / 7.5);
		line-height: calc(68vmin / 7.5);
		border-radius: calc(34vmin / 7.5);
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: calc(28vmin / 7.5);
	}

	.game_list {
		display: flex;
		flex-wrap: wrap;
		width: calc(680vmin / 7.5);
		margin: auto;
		position: relative;
	}

	.game_item {
		transition: all 3s;
		width: calc(156vmin / 7.5);
		height: calc(156vmin / 7.5);
		display: flex;

		background-color: #F4D6AA;
		margin-right: calc(15vmin / 7.5);
		margin-bottom: calc(15vmin / 7.5);

		border-radius: calc(8vmin / 7.5);
	}

	.game_item:nth-child(4n) {
		margin-right: 0;
		margin-bottom: 0;
	}

	.game_item:nth-child(15),
	.game_item:nth-child(14),
	.game_item:nth-child(13) {
		margin-bottom: 0;
	}

	.game_item_ {

		width: calc(206vmin / 7.5);
		height: calc(206vmin / 7.5);

		background-color: #F4D6AA;
		margin-right: calc(15vmin / 7.5);
		margin-bottom: calc(15vmin / 7.5);

		border-radius: calc(8vmin / 7.5);
	}

	.game_item_:nth-child(3n) {
		margin-right: 0;
		margin-bottom: 0;
	}

	.game_item_:nth-child(7),
	.game_item_:nth-child(8),
	.game_item_:nth-child(9) {
		margin-bottom: 0;
	}

	.active_item {}




	.silk-ribbon {
		display: inline-block;
		text-align: center;
		width: calc(178vmin / 7.5);
		height: calc(38vmin / 7.5);
		line-height: calc(38vmin / 7.5);
		position: absolute;
		top: calc(26vmin / 7.5);
		right: calc(-50vmin / 7.5);
		z-index: 2;
		overflow: hidden;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		border: calc(1vmin / 7.5) dashed;
		box-shadow: 0 0 0 calc(3vmin / 7.5) #f4c684, 0px calc(21vmin / 7.5) calc(5vmin / 7.5) calc(-18vmin / 7.5) rgba(0, 0, 0, 0.6);
		background: #f4c684;
	}

	.silk-ribbon1 {
		box-shadow: 0 0 0 calc(3vmin / 7.5) #f48585, 0px calc(21vmin / 7.5) calc(5vmin / 7.5) calc(-18vmin / 7.5) rgba(0, 0, 0, 0.6);
		background: #f48585;
	}

	.silk-ribbon2 {
		box-shadow: 0 0 0 calc(3vmin / 7.5) #7e76f4, 0px calc(21vmin / 7.5) calc(5vmin / 7.5) calc(-18vmin / 7.5) rgba(0, 0, 0, 0.6);
		background: #7e76f4;
	}

	.silk-ribbon3 {
		box-shadow: 0 0 0 calc(3vmin / 7.5) #83f483, 0px calc(21vmin / 7.5) calc(5vmin / 7.5) calc(-18vmin / 7.5) rgba(0, 0, 0, 0.6);
		background: #83f483;
	}

	.right {
		flex: 1;
		padding: calc(120vmin / 7.5) 0;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;

		.team_item {
			width: 100%;
			align-items: center;
			display: flex;
			font-size: calc(36vmin / 7.5);
			font-weight: 700;
			color: #333333;
			margin: calc(10vmin / 7.5) 0;

			image {
				width: calc(94vmin / 7.5);
				height: calc(94vmin / 7.5);
				margin-left: calc(30vmin / 7.5);
			}

			.name {
				flex: 1;
				margin: 0 calc(8vmin / 7.5);
			}

			.score {}
		}
	}


	video {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.anew_btn {
		width: calc(334vmin / 7.5);
		height: calc(98vmin / 7.5);
		line-height: calc(98vmin / 7.5);
		border-radius: calc(49vmin / 7.5);
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: calc(34vmin / 7.5);
		margin: auto;
	}
	
	
	.numIndex{
		position: absolute;
		left: calc(10vmin / 7.5);
		bottom: calc(10vmin / 7.5);
		color: #ffffff;
		font-size: calc(26vmin / 7.5);
	}
</style>
